<template>
    <div class="bjcss" @dblclick="quanping" :class="isFullScreen?'fullscreen':''">
        <div class="whgd">
            <div class="bticss">
                <img src="/@/views/linkoo/panel3/img/xskbk.png" style="width: 100%;">
                <div class="riqicss">{{date}}</div>
            </div>
            <div class="kanbanviewcss">
                <div>
                    <div class="tubiao1">
                        <img class="wh100" src="/@/views/panimg/ydjhtu.png" alt="">
                    </div>
                    <div class="tubiao2">
                        <img class="wh100" src="/@/views/panimg/x2.png" alt="">
                    </div>
                    <div class="tubiao3">
                        <img class="wh100" src="/@/views/panimg/x3.png" alt="">
                    </div>
                    <div class="tubiao4">
                        <img class="wh100" src="/@/views/panimg/x4.png" alt="">
                    </div>
                    <div class="tubiao5">
                        <img class="wh100" src="/@/views/panimg/x5.png" alt="">
                    </div>
                    <div class="tubiao6">
                        <img class="wh100" src="/@/views/panimg/x6.png" alt="">
                    </div>
                    <div class="tubiao7">
                        <img class="wh100" src="/@/views/panimg/x7.png" alt="">
                    </div>
                    <div class="tubiao8">
                        <img class="wh100" src="/@/views/panimg/x8.png" alt="">
                    </div>
                    <div class="n1">
                        <img class="wh100" src="/@/views/panimg/n1.png" alt="">
                    </div>
                    <div class="n2">
                        <img class="wh100" src="/@/views/panimg/n2.png" alt="">
                    </div>
                    <div class="t1">
                        <img class="wh100" src="/@/views/panimg/t1.png" alt="">
                    </div>
                    <div class="t2">
                        <img class="wh100" src="/@/views/panimg/t2.png" alt="">
                    </div>
                    <div class="t3">
                        <img class="wh100" src="/@/views/panimg/t3.png" alt="">
                    </div>
                    <div class="t4">
                        <img class="wh100" src="/@/views/panimg/t4.png" alt="">
                    </div>
                    <div class="t5">
                        <img class="wh100" src="/@/views/panimg/t5.png" alt="">
                    </div>
                    <div class="t6">
                        <img class="wh100" src="/@/views/panimg/t6.png" alt="">
                    </div>
                    <div class="h1">
                        <img class="wh100" src="/@/views/panimg/h1.png" alt="">
                    </div>
                    <div class="j1">
                        <img class="wh100" src="/@/views/panimg/j1.png" alt="">
                    </div>
                    <div class="z1" @click="tzhjMX('xsywqrmx')">
                        <img class="wh100" src="/@/views/panimg/z1.png" alt="">
                    </div>
                    <div class="z2" @click="tzhjMX('xssjshmx')">
                        <img class="wh100" src="/@/views/panimg/z2.png" alt="">
                    </div>
                    <div class="z3">
                        <img class="wh100" src="/@/views/panimg/z3.png" alt="">
                    </div>
                    <div class="l1">
                        <img class="wh100" src="/@/views/panimg/l1.png" alt="">
                    </div>
                    <div class="b1">
                        <img class="wh100" src="/@/views/panimg/b1.png" alt="">
                    </div>
                    <div class="b2">
                        <img class="wh100" src="/@/views/panimg/b2.png" alt="">
                    </div>
                    <div class="b3">
                        <img class="wh100" src="/@/views/panimg/b3.png" alt="">
                    </div>
                    <div class="f1">
                        <img class="wh100" src="/@/views/panimg/f3y.png" alt="">
                    </div>
                    <div class="f2">
                        <img class="wh100" src="/@/views/panimg/f3y.png" alt="">
                    </div>
                    <div class="f3">
                        <img class="wh100" src="/@/views/panimg/f3y.png" alt="">
                    </div>
                </div>
                <div>
                    <div class="xw1" @click="tzhjMX('xsyjhmx')">
                        <div class="xw1tiele">月度销售计划</div>
                        <div style="margin-top: 20px;text-align: right;width: 122px;">
                            <div class="xw1key">月度销售数量</div>
                            <div class="xw1value ziti">{{ydxsjh}}</div>
                        </div>
                    </div>
                    <div class="xw2" @click="tzhjMX('xszjhmx2')">
                        <div class="xw2tiele">周计划1~2</div>
                        <div style="margin-top: 10px; text-align: right;width: 122px;">
                            <div class="xw1key">1~2周计划总量</div>
                            <div class="xw1value ziti">{{zjh}}</div>
                        </div>
                    </div>
                    <div class="xw3" @click="tzhjMX('xszjhmx5')">
                        <div class="xw3tiele">周计划3~5</div>
                        <div style="margin-top: 10px; text-align: right;width: 122px;">
                            <div class="xw1key">3~5周计划总量</div>
                            <div class="xw1value ziti">{{zjh2}}</div>
                        </div>
                    </div>
                    <div class="xw4" @click="tzhjMX('xsddxfmx')">
                        <div class="xw4tiele">订单下发</div>
                        <div style="margin-top: 10px; text-align: right;width: 122px;">
                            <div class="xw1key">订单下发数量</div>
                            <div class="xw1value ziti">{{ddxf}}</div>
                        </div>
                    </div>
                    <div class="xw5" @click="tzhjMX('xsyjhmx')">
                        <div class="xw5tiele">月度销售计划</div>
                        <div style="margin-top: 10px; text-align: right;width: 122px;">
                            <div class="xw1key">月度销售数量</div>
                            <div class="xw1value ziti">{{ydxsjh}}</div>
                        </div>
                    </div>
                    <div class="xw6" @click="tzhjMX('xszjhmx2')">
                        <div class="xw6tiele">周计划1～2</div>
                        <div style="margin-top: 10px; text-align: right;width: 122px;">
                            <div class="xw1key">1~2周计划总量</div>
                            <div class="xw1value ziti">{{zjh}}</div>
                        </div>
                    </div>
                    <div class="xw7" @click="tzhjMX('xszjhmx5')">
                        <div class="xw7tiele">周计划3~5</div>
                        <div style="margin-top: 10px; text-align: right;width: 122px;">
                            <div class="xw1key">3~5周计划总量</div>
                            <div class="xw1value ziti">{{zjh2}}</div>
                        </div>
                    </div>
                    <div class="xw8" @click="tzhjMX('xsddxfmx')">
                        <div class="xw6tiele">订单下发</div>
                        <div style="margin-top: 10px; text-align: right;width: 122px;">
                            <div class="xw1key">订单下发数量</div>
                            <div class="xw1value ziti">{{zjh}}</div>
                        </div>
                    </div>
                </div>
                <div>
                    <div class="swen1 ziti2">架叉设计</div>
                    <div class="swen2 ziti2">BOM设计</div>
                    <div class="swen3 ziti2">工艺设计</div>
                </div>
                <div>
                    <div class="ywq1">
                        <div class="yt1">业务确认数量：</div>
                        <div class="ziti" style="font-size: 36px;">{{ywqr}}</div>
                    </div>
                    <div class="ywq2">
                        <div class="yt1">设计审核数量：</div>
                        <div class="ziti" style="font-size: 36px;">{{sjsh}}</div>
                    </div>
                    <div class="ywq3" @click="tzhjMX('xscgddslhjmx')">
                        <div class="yt1">焊接数量：</div>
                        <div class="ziti" style="font-size: 28px;">{{cgdd.hj}}</div>
                    </div>
                    <div class="ywq4" @click="tzhjMX('xscgddsltzmx')">
                        <div class="yt1">涂装数量：</div>
                        <div class="ziti" style="font-size: 28px;">{{cgdd.tz}}</div>
                    </div>
                    <div class="ywq5" @click="tzhjMX('xscgddslmx')">
                        <div class="yt1">总装数量：</div>
                        <div class="ziti" style="font-size: 28px;">{{cgdd.zz}}</div>
                    </div>
                </div>
            </div>
        </div>
    </div>
</template>
<script setup>
    import{ref,onMounted} from "vue"
    import {mianbanData,mianbanData2} from "/@/api/panel/index"
    import {useRouter} from 'vue-router'
    const router =useRouter()
    let isFullScreen = ref(false)
    let date = ref('2024年8月1日')
    let jilvdingshiqi = ref(null)
    onMounted(()=>{
        getdate()
        getList()
    })
    let ddxf = ref(0)
    let sjsh = ref(0)
    let jgsh = ref(0)
    let ywsh = ref(0)
    let cgdd = ref({
        hj:0,
        tz:0,
        zz:0
    })
    let ydxsjh = ref(0)
    let zjh = ref(0)
    let zjh2 = ref(0)
    let ywqr = ref(0)
    const getList =()=>{
        // 订单下发
        mianbanData('xsddxf').then((res)=>{
            if(res.code==0){
                ddxf.value=res.data?res.data[0].num:0
            }
        })
        // 设计审核
        mianbanData('xssjsh').then((res)=>{
            if(res.code==0){
                sjsh.value=res.data?res.data[0].num:0
            }
        })
        // 价格审核
        mianbanData('xsjgsh').then((res)=>{
            if(res.code==0){
                jgsh.value=res.data?res.data[0].num:0
            }
        })
        // 业务审核 
        mianbanData('xsywsh').then((res)=>{
            if(res.code==0){
                ywsh.value=res.data?res.data[0].num:0
            }
        })
        // 采购订单生成 
        mianbanData('xscgddsl').then((res)=>{
            if(res.code==0){
                res.data.forEach(element => {
                    if(element.cInvDefine3=='焊接'){
                        cgdd.value['hj']=element['U8采购订单总数量']
                    }else if(element.cInvDefine3=='涂装'){
                        cgdd.value['tz']=element['U8采购订单总数量']
                    }else if(element.cInvDefine3=='总装'){
                        cgdd.value['zz']=element['U8采购订单总数量']
                    }
                });
            }
        })
        // 月度销售计划
        mianbanData('xsyjh').then((res)=>{
            if(res.code==0){
                ydxsjh.value=res.data?res.data[0].num:0
            }
        })
        // 周计划1～2 
        mianbanData('xszjh2').then((res)=>{
            if(res.code==0){
                zjh.value=res.data?res.data[0].num:0
            }
        })
        // 周计划3～5 
        mianbanData('xszjh5').then((res)=>{
            if(res.code==0){
                zjh2.value=res.data?res.data[0].num:0
            }
        })
        // 业务确认
        mianbanData('xsywqr').then((res)=>{
            if(res.code==0){
                ywqr.value=res.data?res.data[0].num:0
            }
        })
    }
    const getdate=()=>{
        // 创建一个新的Date对象，它将包含当前日期和时间
        var currentDate = new Date();
        
        // 获取当前日期的各个部分
        var year = currentDate.getFullYear(); // 获取年份
        var month = currentDate.getMonth() + 1; // 获取月份，+1因为getMonth()返回的月份从0开始
        var day = currentDate.getDate(); // 获取日
        date.value=`${year}年${month}月${day}日`
    }
    const tzhjMX=(value)=>{
        router.push({path:"/ranelmingxi",query: { id: value}})
    }
    const quanping = (element)=>{
        console.log(element);
        
        isFullScreen.value=!isFullScreen.value
        if(isFullScreen.value){
            requestFullScreen(document.documentElement)
        }else{
            requestFullScreen2(document.documentElement)
        }
    }
    const requestFullScreen = (element) =>{
        var requestMethod = element.requestFullScreen || element.webkitRequestFullScreen || element.mozRequestFullScreen || element.msRequestFullScreen;
        if (requestMethod) {
            requestMethod.call(element);
        } else if (
            typeof window.ActiveXObject !== "undefined") {
            var wscript = new ActiveXObject("WScript.Shell");
            if (wscript !== null) {
                wscript.SendKeys("{F11}");
            }
        }
    };
    const requestFullScreen2 = (element) =>{
        document.exitFullscreen();
    };
</script>
<style>
    @import url("index.css");
    @font-face {
        font-family: electronicFont;
        src: url(./imaget/DS-DIGI-1.ttf);
    }
    .bjcss{
        width:100%;
        height: 100vh;
        background-color: rgb(1, 7, 20);
        overflow: auto;
    }
    .fullscreen{
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        z-index: 99999;
    }
    .whgd{
        width: 1920px;
        height: 1080px;
        font-size: 12px;
        box-sizing: border-box;
        background-image: url('/@/views/linkoo/panel/imaget/25D.png'); /* 设置背景图片 */
        background-size: 100% 100%; /* 背景图片覆盖整个元素 */
        background-repeat: no-repeat; /* 背景图片不重复 */
        background-position: center; /* 背景图片居中 */
    }
</style>